<template>
    <div>
        <div class="" v-loading="isloading">
            <div class="relative" :style="{ height: 'calc(800px)', width: 'calc(100%)' }">
                <clickMap v-if="active == 1" ref="clickMapRef" :key="markey" :bgImg="bgImg" :markerArr="data"
                    :editAble="false" :isShowPopup="false" />
                <mapForm v-if="active == 2" ref="mapFormRef" :mt="false" :key="markey" :labelMarkers="mapdata" :isEdit="false" />
                <div class="absolute w-[100%] z-[10000000] top-[20px] flex justify-center">
                    <div class="px-[10px] cursor-pointer py-[6px] borderl"
                        :class="active == 1 ? 'bg-[var(--el-color-primary)] text-[#fff]' : '  text-[#000] bg-[#f5f5f5]'"
                        @click="checkmodle(1)">平面模式</div>
                    <div class="px-[10px]  cursor-pointer py-[6px]  borderr"
                        :class="active == 2 ? 'bg-[var(--el-color-primary)] text-[#fff]' : 'bg-[#f5f5f5] text-[#000]'"
                        @click="checkmodle(2)">地图模式</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import clickMap from '@/components/clickMap/marker.vue'
import mapForm from '@/components/mapForm/map.vue'
import { projectsetting } from "@/api/screen/screenmune";
import { getDevicePosition } from '@/api/screen/index'
const props = defineProps({
    id: {
        type: String,
        default: ''
    },
    formInline: {
        type: Object,
        default: {
            img: []
        }
    }
})
const isloading = ref(true)
const active = ref(1)
const markey = ref(0)
const data = ref([])
const bgImg = ref(null)
const mapdata = ref([])
const getSettinginfo = () => {
    projectsetting({projectId:props?.formInline?.projectId}).then(res => {
        if (res.code == 200) {
            bgImg.value = res.result.projectPlan
            markey.value++
            isloading.value = false
        }
    })
}
const getData = () => {
    getDevicePosition({ deviceId: props.id,projectId:props?.formInline?.projectId }).then(res => {
        bgImg.value = res.result.drawingImg
        if (res.code == 200 && res.result.position == 1) {
            if (res.result.drawingPoint.lat !== '') {
                data.value = [res.result.drawingPoint]
                active.value = 1
            } else if (res.result.markPoint.lat !== '') {
                mapdata.value = [res.result.markPoint]
                active.value = 2
            }
            isloading.value = false
            markey.value++
        } else if (res.code == 200) {
            getSettinginfo()
        } else {
            isloading.value = false
        }
    }).catch(err => {
        isloading.value = false
    })

}
getData()
const checkmodle = (e) => {
    active.value = e
}
</script>
<style lang="scss" scoped>
.borderl {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.borderr {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
</style>
